Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Fix] hook-use-state: Allow UPPERCASE setState setter prefixes #3244

Merged
merged 1 commit into from
Mar 15, 2022

Conversation

duncanbeevers
Copy link
Contributor

Closes #3243

This PR allows useState destructured variable names to use ALL-UPPER-CASE for the first segment of the setter variable name.

Example

// Previously invalid, now valid
const [rgbColor, setRGBColor] = useState();

Discussion

The existing suggested variable name setRgbColor is still the sole suggestion; setRGBColor is considered valid, but is never suggested.

This should be a non-breaking change as all previously-valid code is still considered valid.

@codecov-commenter
Copy link

codecov-commenter commented Mar 14, 2022

Codecov Report

Merging #3244 (40a08a3) into master (73ad445) will decrease coverage by 0.01%.
The diff coverage is 87.50%.

❗ Current head 40a08a3 differs from pull request most recent head cab6943. Consider uploading reports for the commit cab6943 to get more accurate results

Impacted file tree graph

@@            Coverage Diff             @@
##           master    #3244      +/-   ##
==========================================
- Coverage   97.69%   97.68%   -0.02%     
==========================================
  Files         121      121              
  Lines        8550     8554       +4     
  Branches     3096     3100       +4     
==========================================
+ Hits         8353     8356       +3     
- Misses        197      198       +1     
Impacted Files Coverage Δ
lib/rules/hook-use-state.js 98.55% <87.50%> (-1.45%) ⬇️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 73ad445...cab6943. Read the comment docs.

{
code: `
import { useState } from 'react'
function useCustomColorValue() {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added this case to ensure the camel-case splitter case captures the correct suffix.

import { useState } from 'react'
function useRGB() {
const [rgb, setRGB] = useState()
return [rgb, setRGB]
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Testing both:

  • bare ALL-UPPERCASE value
  • compound UPPERCASE-prefix + arbitrary suffix

Copy link
Member

@ljharb ljharb left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, thanks

lib/rules/hook-use-state.js Outdated Show resolved Hide resolved
lib/rules/hook-use-state.js Outdated Show resolved Hide resolved
lib/rules/hook-use-state.js Outdated Show resolved Hide resolved
@@ -72,7 +72,7 @@ module.exports = {
const expectedSetterVariableNames = upperCaseCandidatePrefix ? [
`set${upperCaseCandidatePrefix.charAt(0).toUpperCase()}${upperCaseCandidatePrefix.slice(1)}${caseCandidateSuffix}`,
`set${upperCaseCandidatePrefix.toUpperCase()}${caseCandidateSuffix}`,
] : undefined;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I usually try to avoid this empty-object fallback pattern as it allocates unnecessary empty objects, and because it aligns really naturally with the conditional-access-operator pattern in more-modern js versions.

Happy to follow with the suggestions, but just thought I'd share my thoughts, particularly because they've been shaped somewhat by this repository's tool-for-all-ages mentality.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah, that's true, but without optional chaining, it's a lot grosser. i prefer having a constant type for things; it's simpler to reason about, and "object allocation" is a non-problem.

@ljharb ljharb changed the title [New] Allow UPPERCASE setState setter prefixes [Fix] hook-use-state: Allow UPPERCASE setState setter prefixes Mar 14, 2022
@ljharb
Copy link
Member

ljharb commented Mar 14, 2022

I think this is a bugfix, not an addition :-)

@duncanbeevers
Copy link
Contributor Author

I think this is a bugfix, not an addition :-)

As you wish to call it… I'll trust your judgement and re-message the commit before squashing.

However, imo…

  • The previous behavior was well-specified.
  • The new behavior introduces no new regressions from the old behavior.

To me this seems like a refinement / enhancement / new feature, rather than addressing a bug that emerged from using the old behavior.

@ljharb
Copy link
Member

ljharb commented Mar 14, 2022

It certainly adds a regression if someone was depending on the previous behavior; we just forgot about initialisms in the initial creation of the rule.

I've already rebased it; i'll land it once tests pass.

@ljharb ljharb merged commit cab6943 into jsx-eslint:master Mar 15, 2022
@duncanbeevers duncanbeevers deleted the hook-set-state-names branch March 15, 2022 12:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

react/hook-use-state not working with camelcase
3 participants